<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
:-webkit-any(.a1) { background-color: green }
.a2 :-webkit-any(.b2) { background-color: green }
.a3 :-webkit-any(.b3, .c3) { background-color: green }
.a4 :-webkit-any(:not(.b4), .c4) { background-color: green }
:-webkit-any(.a5, .b5) ~ .c5 .d5 { background-color: green }

</style>
<div id="t1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div id="t2">
    <span></span>
    <span></span>
    <span></span>
    <span class="b2"></span>
</div>
<div id="t3">
    <span></span>
    <span></span>
    <span class="b3"></span>
    <span class="c3"></span>
</div>
<div id="t4">
    <span></span>
    <span class="b4"></span>
    <span class="b4"></span>
    <span class="c4"></span>
</div>
<div>
    <span id="t5"></span>
    <span class="c5">
        <span class="d5"></span>
    </span>
</div>
<script>
description("Check that targeted class invalidation works with :-webkit-any selectors.");

var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";

var t1 = document.getElementById("t1");
var b2 = document.querySelector("#t2 .b2");
var b3 = document.querySelector("#t3 .b3");
var c3 = document.querySelector("#t3 .c3");
var spans4 = document.querySelectorAll("#t4 span");
var d5 = document.querySelector("#t5 ~ .c5 .d5");

shouldBe("getComputedStyle(t1, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(b2, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(b3, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(c3, null).backgroundColor", "transparent");

for (var i=0; i<4; i++)
    shouldBe("getComputedStyle(spans4[i], null).backgroundColor", "transparent");

shouldBe("getComputedStyle(d5, null).backgroundColor", "transparent");

document.body.offsetLeft; // force style recalc.

t1.className = "a1";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(t1, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

document.getElementById("t2").className = "a2";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(b2, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

document.getElementById("t3").className = "a3";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(b3, null).backgroundColor", "green");
shouldBe("getComputedStyle(c3, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

document.getElementById("t4").className = "a4";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5");
shouldBe("getComputedStyle(spans4[0], null).backgroundColor", "green");
shouldBe("getComputedStyle(spans4[1], null).backgroundColor", "transparent");
shouldBe("getComputedStyle(spans4[2], null).backgroundColor", "transparent");
shouldBe("getComputedStyle(spans4[3], null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

document.getElementById("t5").className = "a5";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(d5, null).backgroundColor", "green");
</script>
